<template>
	<div style="padding-bottom: 100px;">
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules"  labelWidth="75px">
				<uni-forms-item label="发车批次">
					<view style="display: flex;align-items: center;height: 36px;">
						<text style="font-weight: bold;">{{formData.scheduleNo}}</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="司机姓名"  name="driverName" required>
					<uni-combox  :candidates="driverName" placeholder="请输入司机姓名"
						v-model="formData.driverVo['driverName']"></uni-combox>
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phoneNumber" required>
					<uni-easyinput type="number" v-model="formData.driverVo.phoneNumber" placeholder="请输入司机联系电话" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="idCardNo" required>
					<uni-easyinput type="text"  v-model="formData.driverVo.idCardNo" placeholder="请输入司机身份证号" />
				</uni-forms-item>
				<uni-forms-item label="车牌号" name="licensePlate" required>
					<uni-combox @input="inputPlateNumber"  :candidates="licensePlate" placeholder="请输入车牌号"
						v-model="formData.carVo.licensePlate"></uni-combox>
				</uni-forms-item>
				<uni-forms-item label="车型" name="carType" required>
					<uni-data-select v-model="formData.carVo.carType" :localdata="carType"
						style="background-color: white;" />
				</uni-forms-item>
				<uni-forms-item label="发车时间" name="estDepartTime" required>
					<uni-datetime-picker type="datetime" v-model="formData.estDepartTime" />
				</uni-forms-item>
				<uni-forms-item label="相关资料">
					<myfilepicker :limit="'1'" :imageStyles="imageStyles" :fileIdString="formData.driverVo.driverLicenseAttachment" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_driverLicenseAttachment"
							:title="'*点击上传驾驶证照片，支持png/jpg/jpeg，最多可上传1个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>驾驶证</myfilepicker>
					<view style="margin-top: 10px;">
						<myfilepicker :limit="'1'" :imageStyles="imageStyles" :fileIdString="formData.carVo.vehicleAttachment" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_vehicleAttachment"
								:title="'*点击上传行驶证，支持png/jpg/jpeg，最多可上传1个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>行驶证</myfilepicker>
					</view>
					<view style="margin-top: 10px;">
						<myfilepicker :limit="'1'" :imageStyles="imageStyles" :fileIdString="formData.driverVo.personWithCarAttachment" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_personWithCarAttachment"
								:title="'*点击上传人照合一，支持png/jpg/jpeg，最多可上传1个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>人照合一</myfilepicker>
					</view>
					<view style="margin-top: 10px;">
						<myfilepicker :limit="'1'" :imageStyles="imageStyles" :fileIdString="formData.driverVo.idCardAttachment" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_idCardAttachment"
								:title="'*点击上传身份证(正面)，支持png/jpg/jpeg，最多可上传1个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>身份证(正面)</myfilepicker>
					</view>
					<view style="margin-top: 10px;">
						<myfilepicker :limit="'1'" :imageStyles="imageStyles" :fileIdString="formData.driverVo.idCardReverseAttachment" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_idCardReverseAttachment"
								:title="'*点击上传身份证(反面)，支持png/jpg/jpeg，最多可上传1个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>身份证(反面)</myfilepicker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput type="textarea" v-model="formData.remark" placeholder="车次相关备注说明" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view
			style="background-color: #ffffff;z-index: 2;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
			<view
				style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
				<view @click="cancelSubmit()" hover-class="buttonHover"
					style="height: 35px;background-color: #ffffff;border:1px solid #bf5f09;color: #bf5f09;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					取消</view>
			</view>
			<view
				style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
				<view @click="submit()" hover-class="buttonHover"
					style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					保存</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {getDriverList} from '@/api/system/driver.js';
	import {getCarrierCarList,getCarrierCarDetails} from '@/api/system/driver.js';
	import {getScheduleDetails,updateSchedule} from '@/api/system/dispatch.js'
	import {getDicts} from '@/api/system/dict.js'
	
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				formData: {
					scheduleNo:'',
					driverVo:{
						driverName:'',
						phoneNumber:'',
						idCardNo:''
					},
					carVo:{
						licensePlate:'',
						carType:'',
					},
					estDepartTime:'',
					remark:'',
				},
				// 校验规则
				rules: {
					phoneNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
					idCardNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						},
						{
						    pattern: '(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)',
						    errorMessage: "请输入正确的身份证号"
						}
						]
					},
					licensePlate:{
						rules: [{
							required: true,
							errorMessage: '请输入车牌号',
						}]
					},
					carType:{
						rules: [{
							required: true,
							errorMessage: '请选择车型',
						}]
					},
					estDepartTime:{
						rules: [{
							required: true,
							errorMessage: '请选择发车时间',
						}]
					}
				},
				//下拉框 ->司机
				driverName: [],
				//下拉框->车型
				carType:[],
				
				//下拉框->车牌号
				licensePlate:[],
				
				imageStyles: {
					width: '100%',
					height: 200,
					border: {
						radius: '4px'
					}
					
				},

				//节流函数标志
				statu:true,
			}
		},
		onLoad(e) {
			if(e.scheduleId)
			{
				//获取调度车次详情
				getScheduleDetails(e.scheduleId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}		
				})
			}
		},
		created() {
			//获取司机姓名下拉框
			getDriverList({pageNum:1,pageSize:1000}).then(res=>{
				this.driverName=res.rows.map(item=>{
					return item.driverName
				})
			})
			//获取车型下拉框
			getDicts('car_type').then(res=>{
				this.carType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//获取车牌号下拉框
			getCarrierCarList({pageNum:1,pageSize:1000}).then(res=>{
				this.licensePlate=res.rows.map(item=>{
					return item.licensePlate
				})
			})
		},
		methods: {
			//车牌号
			inputPlateNumber(e){
				if(e)
				{
					//节流函数
					let that=this
					if(!that.statu)
					{
						return
					}
					that.statu=false
					setTimeout(()=>{
						getCarrierCarDetails(e).then(res=>{
							that.formData.carVo=res.data
							that.formData.carId=res.data.carId  //车辆id
						})
						that.statu=true;
					},1000)
					
				}
			},
			//接收文件传递的id字符串集合
			getFileIdString_driverLicenseAttachment(fileIds){
				this.formData.driverVo.driverLicenseAttachment=fileIds
			},
			//接收文件传递的id字符串集合
			getFileIdString_vehicleAttachment(fileIds){
				this.formData.carVo.vehicleAttachment=fileIds
			},
			//接收文件传递的id字符串集合
			getFileIdString_personWithCarAttachment(fileIds){
				this.formData.driverVo.personWithCarAttachment=fileIds
			},
			
			//接收文件传递的id字符串集合
			getFileIdString_idCardAttachment(fileIds){
				this.formData.driverVo.idCardAttachment=fileIds
			},
			//接收文件传递的id字符串集合
			getFileIdString_idCardReverseAttachment(fileIds){
				this.formData.driverVo.idCardReverseAttachment=fileIds
			},
			//取消保存
			cancelSubmit(){
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
			},
			//保存调度信息
			submit(){
				// this.$refs.form.validate().then(res => {
					

				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// 	uni.showToast({
				// 		title: err[0].errorMessage,
				// 		icon: 'none'
				// 	})
				// })
				if(!this.formData.carVo.licensePlate)
				{
					uni.showToast({
						icon:'none',
						title:'请填写车牌号'
					})
					return
				}
				uni.showLoading({
					title: '正在保存...',
				})
				
				this.formData.carJson=this.formData.carVo;
				this.formData.driverJson=this.formData.driverVo;
				
				updateSchedule(this.formData).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.otherFun('0') // 給上一頁綁定方法otherFun,傳參0（tabIndex：0）
						uni.navigateBack({
							delta: 1 // 可以不傳delta值，默認為1
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}		
				})
			},
		},
	}
</script>

<style scoped>
    .buttonHover {
		opacity: 0.6;
	}
	::v-deep .file-title{
	    font-size: 12px;
	    color: #333;
	}
	
	::v-deep .uni-forms-item__content{
		width: 0vw;
	}
	
	::v-deep .uni-border-left{
	    border-left-color: #f0f0f0;
	    border-left-style: solid;
	    border-left-width: 1px;
	    background-color: rgb(157,81,38);
	    border-radius: 0 0 11px 0;
	    /* color: white; */
	}
	::v-deep .uni-button-color{
	    color: #ffffff;
	}
</style>